<template>
	<view class="character">
		<view :class="['player',status]" @animationend="statusAniEnd">
			<view class="name">玩家</view>
			<view class="progress">
				<view class="hp">
					<comp-progress :size="15" activeColor="var(--color-red)"
						:percent="parseInt(current_hp/max_hp * 100)"></comp-progress>
					<view class="info-text">{{current_hp}} / {{max_hp}}</view>
				</view>
				<view class="rate">
					<comp-progress :size="5" activeColor="#0099cc" :percent="rate"></comp-progress>
				</view>
			</view>
			<view class="skill-animation">
				<comp-frame-animation :skillid="item.skill" v-for="(item,index) in skillData" :key="index"></comp-frame-animation>
			</view>
		</view>
		<view class="damageData" v-if="damageData.length > 0">
			<block v-for="(item,index) in damageData">
				<view :class="['text',item.type]" v-if="item.visible" @animationend="wavingBloodEnd(index)">
					{{item.damage}}</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import compProgress from "@/components/comp-progress/comp-progress.vue"
	
	import compFrameAnimation from "@/components/comp-frame-animation/comp-frame-animation.vue"
	
	function selectTargets(targets, count) {
		const aliveTargets = targets.filter(t => t.hp > 0);
		const selectedTargets = [];
		while (selectedTargets.length < count && aliveTargets.length > 0) {
			const randomIndex = Math.floor(Math.random() * aliveTargets.length);
			selectedTargets.push(aliveTargets[randomIndex]);
			aliveTargets.splice(randomIndex, 1);
		}
		return selectedTargets;
	}
	
	
	export default {
		name: "comp-player",
		components: {
			compProgress,
			compFrameAnimation
		},
		computed: {
			...mapState(['player']),
		},
		data() {
			return {
				status: 'idle',
				rate: 0,
				max_hp: 0,
				current_hp : 0,
				damageData: [],
				skillData : [],
				recover_timer : null
			};
		},
		mounted() {			
			
			this.rate = 0;
			this.status = 'idle';
			this.max_hp = Object.freeze(this.player.attr.hp)
			this.current_hp = this.max_hp;
			
			this.boundUnderAttack = this.underAttack.bind(this);
			uni.$on('monster_attack', this.boundUnderAttack);
			
			this.attackCount = 0;
			
			// this.recover_timer = setInterval(() => {
			// 	this.current_hp += parseInt(this.player.attr.recover / 5);
			// 	if(this.current_hp >= this.max_hp){
			// 		this.current_hp = this.max_hp
			// 	}
			// },1000)
			

		},
		destroyed() {
			getApp().globalData.common_worker.postMessage({command: 'stop', id: 'player'});
			uni.$off('monster_attack', this.boundUnderAttack);
		},
		methods: {
			setRate() {
				this.rate += this.player.attr.speed / 100;
				if (this.rate >= 100) {
					this.rate = 0;
					this.attack()
				}
			},
			attack() {

				this.status = 'attack';
				
				this.attackCount++;
				
				
				//刺杀剑术
				if(this.attackCount % this.$data_skill.find(item => item.id == 2).cd == 0){
					this.$skill({
						skill_id : 2
					});
					return
				}
				
				//刺杀剑术
				if(this.attackCount % this.$data_skill.find(item => item.id == 3).cd == 0){
					this.$skill({
						skill_id : 3,
						count : 3
					});
					return
				}
				
				//烈火
				if(this.attackCount % this.$data_skill.find(item => item.id == 4).cd == 0){
					this.$skill({
						skill_id : 4
					});
					return
				}
				
				
				this.$skill();
				
				// if(this.attackCount % 3 == 0){
				// 	this.$skill({
				// 		skill_id : 5
				// 	});
				// }else{
				// 	this.$skill();
				// }
				
				
				
				// if(Math.random() * 100 <= 100){
				// 	this.$skill({
				// 		skill_id : 3,
				// 		count : 4
				// 	})
				// }
				
				// if(Math.random() * 100 <= 50){
				// 	this.$skill({
				// 		skill_id : 2,
				// 		count : 4
				// 	})
				// }


			},
			

			underAttack(attack) {

				let def = this.$common.rnd(this.player.attr.min_def,this.player.attr.max_def);

				attack.damage = Math.max(1,Math.round(attack.damage * (1-def/(def+50)) * (1-this.player.attr.reduce_dmg/1000)))

				this.current_hp -= attack.damage;
				
				if(this.current_hp <= 0){
					this.dead()
				}
				
				if (getApp().globalData.appVisibleState == 'onShow') {
					
					if(attack.skill){
						this.skillData.push(attack)
					}
					
					attack.visible = true;
					this.damageData.push(attack)
				}

			},
			dead(){
				this.status = 'dead';
				this.current_hp = 0;
				getApp().globalData.common_worker.postMessage({command: 'stop', id: 'player'});
				uni.$off('monster_attack', this.boundUnderAttack);
				uni.$emit('initbattle');
			},
			statusAniEnd() {
				if(this.status == 'dead') return;
				this.status = 'idle'
			},
			wavingBloodEnd(index) {
				this.damageData[index].visible = false;
			}
		}

	}
</script>

<style lang="scss">
	.character {
		flex: 1;
		position: relative;
		.skill-animation{
			position: absolute;
			left:0;
			right:0;
			bottom:0;
			top:0;
			display: flex;
		}
		.player {
			@include character('player')
		}

		@include damageText()
	}
</style>